<template>
  <div class="download-paper clearfix" id="downloadPaper">
    <div class="sc-box" v-for="(item, idx) in userList" :key="idx">
      <div class="sc-top">
        <p class="title">
          2021年宁波市初中学业水平考试<br/>
          科学实验操作考试
        </p>
        <p class="title-card">监&nbsp;&nbsp;&nbsp;&nbsp;考&nbsp;&nbsp;&nbsp;&nbsp;证</p>
      </div>
      <div class="sc-cont">
        <div> 姓名：<div class="name">{{item.name}}</div> </div>
        <div> 编号：<div class="name">{{item.id}}</div> </div>
      </div>
      <div class="sc-bottom">
        宁波市教育考试院 <br />
        2021年3月
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'download',
  data () {
    return {
      userList: []
    }
  },
  created () {
    for (let i = 0; i < 9; i++) {
      this.userList.push({
        name: '胡金淼',
        id: '009'
      })
    }
  },
  mounted () {
    this.downloadPdf()
  },
  methods: {
    downloadPdf () {
      // let that = this
      // let htmlEml = document.querySelector(`#downloadPaper`)
      // that.$http.covert2Pdf({ data: htmlEml.innerHTML }).then(res => {
      //   if (res.code === 20000) {
      //     window.open(res.data.data)
      //   }
      // })
    }
  }
}
</script>

<style lang="scss" scoped>
p{
  margin: 0;
}
.download-paper{
  width: 700px;
  margin: 0 auto;
}
.sc-box{
  width: 217px;
  height: 304px;
  border: 1px solid #000;
  color: #000;
  font-size: 11px;
  float: left;
  margin: 15px 7px;
  .sc-top{
    padding: 30px 0;
    text-align: center;
    .title{
      font-size: 13px;
      text-align: center;
      line-height: 18px;
    }
    .title-card{
      font-size: 15px;
      line-height: 20px;
      text-align: center;
      font-weight: 600;
      margin: 50px auto 20px;
    }
  }
  .sc-cont{
    font-size: 13px;
    width: 126px;
    margin: 0 auto 25px;
    .name{
      display: inline-block;
      border: none;
      box-shadow: none;
      border-bottom: 1px solid rgba(0,0,0,.2);
      width: 80px;
      text-align: center;
    }
  }
  .sc-bottom{
    text-align: center;
    line-height: 16px;
  }
}
</style>
